<template>
    <div class="view_brand_authorized">
        <card title="品牌授权">
            <template #actions>
                <el-select class="w-32" v-model="queryAuthorizationType" placeholder="授权类型" clearable>
                    <el-option
                        v-for="(val, key) in brandAuthorizationTypes"
                        :key="key"
                        :value="key"
                        :label="val.text"
                    />
                </el-select>
                <el-select class="w-32" v-model="queryReviewStatus" placeholder="审核状态" clearable>
                    <el-option v-for="(val, key) in brandReviewStatus" :key="key" :value="key" :label="val.text" />
                </el-select>
            </template>
            <template #default>
                <el-table :data="tableData">
                    <el-table-column label="#" type="index" align="center" />
                    <el-table-column label="店铺名称" prop="shopName" />
                    <el-table-column label="商标注册号" prop="brandSn" />
                    <el-table-column label="品牌名称" prop="name" />
                    <el-table-column label="品牌标识">
                        <template #default="{ row }">
                            <img :src="row.logo" :alt="row.logo" />
                        </template>
                    </el-table-column>
                    <el-table-column label="授权类型">
                        <template #default="{ row: { grantType } }">
                            <el-tag :type="brandAuthorizationTypes[grantType].tagType">
                                {{ brandAuthorizationTypes[grantType].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="审核状态">
                        <template #default="{ row: { auditStatus } }">
                            <el-tag effect="dark" :type="brandReviewStatus[auditStatus].tagType">
                                {{ brandReviewStatus[auditStatus].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="审核人" prop="loginName" />
                    <el-table-column label="审核时间" prop="auditTime" />
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <el-button type="text" @click="view(row)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <template #bottom-right>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>
        </card>

        <!-- 品牌详情对话框 -->
        <el-dialog :visible.sync="visible" custom-class="details">
            <template v-slot:default>
                <div class="desc_list">
                    <div class="desc_list-top">
                        <h1 class="desc_list-title">{{ details.shopName }}</h1>
                        <p class="desc_list-subtitle">卖家账号:{{ details.nickName }}</p>
                    </div>
                </div>
                <dl class="desc_list-content">
                    <div class="desc_list-item">
                        <dt>品牌名称</dt>
                        <dd>{{ details.name }}</dd>
                    </div>
                    <div class="desc_list-item">
                        <dt>商标注册号</dt>
                        <dd>{{ details.brandSn }}</dd>
                    </div>

                    <div class="desc_list-item">
                        <dt>品牌标识</dt>
                        <dd>
                            <img v-toJpeg="details.logo" />
                        </dd>
                    </div>
                    <div class="desc_list-item">
                        <dt>授权类型</dt>
                        <dd>
                            {{ brandAuthorizationTypes[details.grantType].text }}
                        </dd>
                    </div>
                    <div class="desc_list-item">
                        <dt>有效期</dt>
                        <dd>{{ details.validityDate }}</dd>
                    </div>
                    <div class="desc_list-item">
                        <dt>审核状态</dt>
                        <dd>
                            <el-tag effect="dark" :type="brandReviewStatus[details.auditStatus].tagType">
                                {{ brandReviewStatus[details.auditStatus].text }}
                            </el-tag>
                        </dd>
                    </div>
                    <div class="desc_list-item">
                        <dt>审核时间</dt>
                        <dd>{{ details.auditTime }}</dd>
                    </div>
                    <div class="desc_list-item">
                        <dt>资质图片</dt>
                        <dd>
                            <img v-for="(img, index) in details.grantImgs" :key="index" :src="img" :alt="img" />
                            <!-- {{ details.grantImgs }} -->
                        </dd>
                    </div>
                    <div class="desc_list-item">
                        <dt>不通过理由</dt>
                        <el-input v-model="details.note" type="textarea" resize="none" :rows="4" />
                    </div>
                </dl>
            </template>
            <template #footer>
                <el-button size="large" type="danger" @click="review(false)">不通过审核</el-button>
                <el-button size="large" type="primary" @click="review">通过审核</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { getQueryOptions } from '../../mixins';
import { toJpeg } from '../../functions';

export default {
    data() {
        return {
            tableData: [],

            details: {},

            visible: false,

            brandGrantId: 0,
            queryAuthorizationType: '',
            queryReviewStatus: '',
        };
    },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/pms/findPageBrandGrantInfo',
            paginable: true,
            params: {
                queryAuthorizationType: 'grantType',
                queryReviewStatus: 'auditStatus',
            },
            // fnAfterQuery(res) {
            //     let allImages = res.map(el => el.logo);
            //     toJpeg(allImages).then($res => {
            //         $res.forEach((covertedImage, index) => {
            //             res[index].native_url = covertedImage;
            //         });

            //         this.tableData = res;
            //     });
            //     // 返回false显式赋值结果
            //     return false;
            // },
        }),
    ],

    computed: {
        // >>>>> 品牌常量状态
        // 品牌授权类型
        brandAuthorizationTypes() {
            return {
                1: { text: '自主品牌', tagType: 'primary' },
                2: { text: '授权', tagType: 'success' },
            };
        },

        // 品牌审核状态
        brandReviewStatus() {
            return {
                1: { tagType: 'success', text: '已通过' },
                2: { tagType: 'warning', text: '审核中' },
                3: { tagType: 'danger', text: '不通过' },
                4: { tagType: 'info', text: '禁用' },
            };
        },
        // 品牌常量状态 <<<<<
    },

    watch: {
        queryAuthorizationType: 'query',
        queryReviewStatus: 'query',
    },

    methods: {
        view(row) {
            this.viewedBrandGrantId = row.brandGrantId;
            this.viewedBrandId = row.brandId;
            this.viewedSellerId = row.sellerId;

            this.$get('/yxl/pms/findBrandGrantInfoDetails', { brandGrantId: row.brandGrantId }).then(res => {
                this.details = res;
                this.visible = true;
            });
        },

        review(approved = true) {
            this.$post('/yxl/pms/brandGrantInfoAudit', {
                brandGrantId: this.viewedBrandGrantId,
                sellerId: this.viewedSellerId,
                brandId: this.viewedBrandId,
                auditStatus: approved ? 1 : 3,
                // 通过审核无需理由，不通过审核则需理由
                note: approved ? undefined : this.details.note,
            }).then(res => {
                this.visible = false;

                this.query();
            });
        },
    },
};
</script>